<template>
	<view>
		<view class="flex-between chat-interact">
			<view class="flex chat-interaction">
				<view class="flex chatItem">
					<text @click="friendClick" :class="{recomClick: titleClick === '1'}">好友</text>
					<!-- <u-badge v-show="titleClick === '2'" :isDot="true" type="success" bgColor="#FF4848"></u-badge> -->
				</view>
				<view class="flex chatItem">
					<text @click="newFriendClick" :class="{recomClick: titleClick === '2'}">新好友</text>
					<u-badge v-show="newFriendMsg > 0" :isDot="true" type="success" bgColor="#FF4848"></u-badge>
				</view>
				<view class="flex chatItem">
					<text @click="addFriendClick" :class="{recomClick: titleClick === '3'}">加好友</text>
					<!-- <u-badge v-show="titleClick === '2'" :isDot="true" type="success" bgColor="#FF4848"></u-badge> -->
				</view>
			</view>
			<view class="flex-align scanIcon">
				<navigator url="/pages/chit-chat/scan/index">
					<u-icon name="scan" color="#6D6D6D" size="28"></u-icon>
				</navigator>
				<navigator url="/pages/chit-chat/notice/index">
					<u-icon name="bell" color="#6D6D6D" size="26"></u-icon>
				</navigator>
			</view>
		</view>
		<view class="search-contont flex-align">
			<view class="search-name flex-align">
				<u-icon name="search" color="#BDBDBD"></u-icon>
				<u--input placeholder="账号" border="surround" v-model="value" @change="contactChange"></u--input>
			</view>
			<u-button type="primary" text="搜索" color="#1872FF"></u-button>
		</view>
		<view class="">
			<u-index-list v-show="titleClick === '1'" :index-list="indexList">
				<template v-for="(item, index) in itemArr">
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<u-index-item>
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor v-show="indexList[index]" :text="indexList[index]"></u-index-anchor>
						<!-- #endif -->
						<!-- <view class="list-cell" v-for="(cell, index) in item">
							{{cell}}
						</view> -->
						<u-cell v-for="(cell, index) in item">
							<view slot="title" class="u-slot-title flex-between">
								<u-avatar :src="cell.avatar" shape="square" size="40"></u-avatar>
								<u--text class="siteutext" :text="cell.title" color="#2C2C2C" size="28rpx"></u--text>
							</view>
						</u-cell>
					</u-index-item>
				</template>
			</u-index-list>
		</view>

		<view v-show="titleClick === '2'" class="">
			<view class="day">三天前</view>
			<u-cell-group>
				<u-cell v-for="(item,index) in newFriendMsg" :key="index">
					<view slot="title" class="u-slot-title flex-between">
						<u-avatar src="" shape="square" size="40"></u-avatar>
						<view class="name flex-between">
							<view class="">
								<u--text class="siteutext" text="杨怡" color="#2C2C2C" size="28rpx"></u--text>
								<text class="introduce ellipsis-line">您好，很高兴能与您沟通交流，我很高兴能与您沟通交流</text>
							</view>
							<u-button type="primary" text="已添加"></u-button>
						</view>
					</view>
				</u-cell>
				<!-- <u-cell>
					<view slot="title" class="u-slot-title flex-between">
						<u-avatar src="" shape="square" size="40"></u-avatar>
						<view class="name flex-between">
							<view class="">
								<u--text class="siteutext" text="刘二" color="#2C2C2C" size="28rpx"></u--text>
								<text class="introduce ellipsis-line">您好！</text>
							</view>
							<u-button type="primary" text="已添加"></u-button>
						</view>
					</view>
				</u-cell> -->
			</u-cell-group>
			<view class="friend-recommend">
				<view class="day">朋友推荐</view>
				<u-cell-group>
					<u-cell v-for="(item,index) in 5" :key="index">
						<view slot="title" class="u-slot-title flex-between">
							<navigator url="/pages/address-book/friend-application/index">
								<u-avatar src="" shape="square" size="50"></u-avatar>
							</navigator>
							<view class="name flex-between">
								<view class="">
									<u--text class="siteutext" text="郭拉拉" color="#2C2C2C" size="28rpx"></u--text>
									<text class="introduce ellipsis-line">联想集团 高级研发经理</text>
									<text class="introduce ellipsis-line">IT·互联网</text>
								</view>
								<navigator url="/pages/address-book/add-friends/index">
									<u-button class="good-friend flex-align" type="primary" icon="plus-people-fill"
										text="好友"></u-button>
								</navigator>
							</view>
						</view>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
		<view v-show="titleClick === '3'" class="create-group">
			<u-cell-group>
				<u-cell url="/pages/address-book/Initiate-group-chat/index" arrow-direction="right" :isLink="true">
					<view slot="title" class="u-slot-title flex-between">
						<image class="add_friend" src="../../../static/create-group.png" mode=""></image>
						<view class="name">
							<u--text class="siteutext" text="面对面建群" color="#2C2C2C" size="28rpx"></u--text>
							<text class="introduce ellipsis-line">与身边的朋友进入同一个群聊</text>
						</view>
					</view>
				</u-cell>
				<u-cell arrow-direction="right" :isLink="true">
					<view slot="title" class="u-slot-title flex-between">
						<image class="add_friend" src="../../../static/address-book.png" mode=""></image>
						<view class="name">
							<u--text class="siteutext" text="手机联系人" color="#2C2C2C" size="28rpx"></u--text>
							<text class="introduce ellipsis-line">添加或邀请通讯录中的朋友</text>
						</view>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import tabbar from '../../../component/tabbar/index.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				value: '',
				titleClick: '1',
				indexList: ["", "A", "B", "C", "D", "E"],
				newFriendMsg: 2,
				itemArr: [
					[{
							avatar: '',
							title: '列表A01'
						},
						{
							avatar: '',
							title: '列表A02'
						},
						{
							avatar: '',
							title: '列表A03'
						},
					],
					[{
							avatar: '',
							title: '列表A1'
						},
						{
							avatar: '',
							title: '列表A2'
						},
						{
							avatar: '',
							title: '列表A3'
						},
					],
					[{
							avatar: '',
							title: '列表B1'
						},
						{
							avatar: '',
							title: '列表B2'
						},
						{
							avatar: '',
							title: '列表B3'
						},
					],
					[{
							avatar: '',
							title: '列表C1'
						},
						{
							avatar: '',
							title: '列表C2'
						},
						{
							avatar: '',
							title: '列表C3'
						},
					],
				]
			};
		},
		methods: {
			friendClick(e) {
				this.titleClick = '1'
			},
			newFriendClick(e) {
				this.titleClick = '2'
			},
			addFriendClick(e) {
				this.titleClick = '3'
			},
			contactChange(value) {
				console.log(value, this.value, 'oooo')
			}
		}
	}
</script>

<style lang="less">
	.recomClick {
		font-weight: bold !important;
		font-style: italic;
		font-size: 48rpx !important;
		color: #3d3d3d !important;
	}

	.chat-interact {
		padding: 20rpx 42rpx 0rpx 34rpx;
		background-color: #ffffff;
	}

	.chat-interaction {
		column-gap: 32rpx;
		align-items: flex-end;
	}

	.chat-interaction text {
		font-weight: 400;
		font-size: 36rpx;
		color: #6D6D6D;
	}

	.search-contont {
		padding: 30rpx 30rpx;
		background-color: #ffffff;

		::v-deep .uni-input-placeholder {
			font-size: 32rpx !important;
			color: #BDBDBD !important;
		}

		::v-deep .uni-input-input {
			font-size: 32rpx;
			color: #3D3D3D;
		}
	}

	.search-contont .u-button {
		width: 110rpx;
		height: 80rpx;
		background: #1872FF;
		border-radius: 0rpx 16rpx 16rpx 0rpx;
		border: 2rpx solid #1872FF;
	}

	::v-deep .search-contont .u-icon__icon span {
		font-size: 56rpx;
		font-weight: bold;
	}

	::v-deep .search-contont .u-button__text span {
		font-size: 32rpx;
	}

	.search-name {
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 2rpx 0rpx 0rpx 16rpx;
		border: 2rpx solid #1872FF;
		box-sizing: border-box;
		padding-left: 22rpx;
		column-gap: 5rpx;
		align-items: center;
	}

	.siteutext {
		white-space: nowrap;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.u-slot-title {
		column-gap: 20rpx;

		.name {
			flex: 1;

			.u-button {
				width: 114rpx;
				font-size: 24rpx;
				color: #1872FF;
				background-color: #ffffff;
				border: none;
				padding: 0;
				margin: 0;
				flex-shrink: 0;

				&::after,
				&::before {
					content: none;
				}
			}

			::v-deep .siteutext span {
				font-size: 28rpx;
				color: #3D3D3D !important;
			}

			.introduce {
				font-size: 24rpx;
				color: #8A8A8A;
				margin-top: 12rpx;
			}
		}
	}

	::v-deep .u-cell {
		position: relative;
	}

	::v-deep .u-cell__body {
		background-color: #ffffff;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
	}

	::v-deep .u-line {
		border: none !important;
	}

	::v-deep .u-line {
		width: 600rpx !important;
		height: 2rpx;
		background-color: #D8D8D8;
		width: 84% !important;
		position: absolute;
		right: 16rpx;
		bottom: 0;
	}

	::v-deep .u-index-anchor {
		background-color: #F5F5F5 !important;
		height: 56rpx !important;

		.u-index-anchor__text span {
			color: #6D6D6D !important;
			font-size: 28rpx !important;
		}
	}

	// ::v-deep .u-index-item {
	// 	.u-cell:last-child {
	// 		.u-line {
	// 			height: 0rpx;
	// 		}
	// 	}
	// }

	::v-deep .u-cell:last-child {
		.u-line {
			height: 0rpx;
		}
	}

	.day {
		background-color: #ffffff;
		font-size: 28rpx;
		color: #3D3D3D;
		line-height: 40rpx;
		padding: 26rpx 0rpx 20rpx 30rpx;
	}

	::v-deep .newFriend {
		.u-line {
			height: 0rpx;
		}
	}

	.friend-recommend {
		margin-top: 22rpx;
		background-color: #ffffff;

		.day {
			margin-bottom: 8rpx;
		}

		::v-deep .name .good-friend {
			width: 120rpx;
			height: 53rpx;
			background: #1872FF;
			border-radius: 60rpx 60rpx 60rpx 60rpx;

			span {
				font-size: 24rpx;
				color: #FFFFFF;
				margin-right: 3rpx;
				height: 18px;
				line-height: 20px;
			}
		}

		::v-deep .u-icon__icon {
			span {
				font-size: 28rpx !important;
			}
		}
	}

	.add_friend {
		width: 60rpx;
		height: 60rpx;
	}

	::v-deep .uicon-arrow-right {
		span {
			font-size: 40rpx;
			color: #8d8d8d;
		}
	}

	.create-group {
		padding-top: 60rpx;
		background-color: #ffffff;
	}
</style>